<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0">

    <title>订单详情</title>

    <link th:href="@{/AmazeUI-2.4.2/assets/css/admin.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/AmazeUI-2.4.2/assets/css/amazeui.css}" rel="stylesheet" type="text/css">

    <link th:href="@{/css/personal.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/orstyle.css}" rel="stylesheet" type="text/css">

    <script th:src="@{/AmazeUI-2.4.2/assets/js/jquery.min.js}"></script>
    <script th:src="@{/AmazeUI-2.4.2/assets/js/amazeui.js}"></script>


</head>

<body>
<!--头 -->
<th:block th:include="common :: header2"></th:block>
<th:block th:include="common :: category"></th:block>
<div class="center">
    <div class="col-main">
        <div class="main-wrap">

            <div class="user-orderinfo">

                <!--标题 -->
                <div class="am-cf am-padding">
                    <div class="am-fl am-cf"><strong class="am-text-danger am-text-lg">订单详情</strong> / <small>Order&nbsp;details</small>
                    </div>
                </div>
                <hr/>
                <!--进度条-->
                <div class="m-progress">
                    <div class="m-progress-list">
                        <span class="step-1 step"
                              th:if="${itemList.status eq 10 }">
                            <em class="u-progress-stage-bg"></em>
                            <i class="u-stage-icon-inner">1<em class="bg"></em></i>
                            <p class="stage-name">付款</p>
                        </span>
                        <span class="step-2 step"
                              th:if="${itemList.status eq 20 || itemList.status eq 40 || itemList.status eq 50 }">
                            <em class="u-progress-stage-bg"></em>
                            <i class="u-stage-icon-inner">1<em class="bg"></em></i>
                            <p class="stage-name">付款</p>
                        </span>

                        <span class="step-1 step"
                              th:if="${itemList.status eq 20 }">
                                   <em class="u-progress-stage-bg"></em>
                                   <i class="u-stage-icon-inner">2<em class="bg"></em></i>
                                   <p class="stage-name">卖家发货</p>
                        </span>
                        <span class="step-2 step" th:if="${itemList.status eq 40 || itemList.status eq 50}">
                                   <em class="u-progress-stage-bg"></em>
                                   <i class="u-stage-icon-inner">2<em class="bg"></em></i>
                                   <p class="stage-name">卖家发货</p>
                                </span>
                        <span class="step-1 step" th:if="${itemList.status eq 40}">
                                   <em class="u-progress-stage-bg"></em>
                                   <i class="u-stage-icon-inner">3<em class="bg"></em></i>
                                   <p class="stage-name">确认收货</p>
                        </span>
                        <span class="step-3 step" th:unless="${itemList.status eq 50 || itemList.status eq 40}">
                                   <em class="u-progress-stage-bg"></em>
                                   <i class="u-stage-icon-inner">3<em class="bg"></em></i>
                                   <p class="stage-name">确认收货</p>
                        </span>
                        <span class="step-2 step" th:if="${itemList.status eq 50}">
                                   <em class="u-progress-stage-bg"></em>
                                   <i class="u-stage-icon-inner">3<em class="bg"></em></i>
                                   <p class="stage-name">确认收货</p>
                        </span>
                        <span class="step-3 step" th:unless="${itemList.status eq 50}">
                                   <em class="u-progress-stage-bg"></em>
                                   <i class="u-stage-icon-inner">4<em class="bg"></em></i>
                                   <p class="stage-name">交易完成</p>
                        </span>
                        <span class="step-2 step" th:if="${itemList.status eq 50}">
                                   <em class="u-progress-stage-bg"></em>
                                   <i class="u-stage-icon-inner">4<em class="bg"></em></i>
                                   <p class="stage-name">交易完成</p>
                        </span>
                        <span class="u-progress-placeholder"></span>
                    </div>
                    <div class="u-progress-bar total-steps-2">
                        <div class="u-progress-bar-inner"></div>
                    </div>
                </div>
                <div class="order-infoaside">
                    <div class="order-logistics" th:if="${itemList.status ge 20}">
                        <p th:if="${itemList.status eq 20}">待发货</p>
                        <a href="logistics.html" th:if="${itemList.status ge 40}">
                            <div class="icon-log">
                                <i><img src="../images/receive.png"></i>
                            </div>
                            <div class="latest-logistics">
                                <p class="text">已签收,签收人是青年城签收，感谢使用天天快递，期待再次为您服务</p>
                                <div class="time-list">
                                    <span class="date">2015-12-19</span><span class="week">周六</span><span class="time">15:35:42</span>
                                </div>
                                <div class="inquire">
                                    <span class="package-detail">物流：天天快递</span>
                                    <span class="package-detail">快递单号: </span>
                                    <span class="package-number">373269427868</span>
                                    <a href="logistics.html">查看</a>
                                </div>
                            </div>
                            <span class="am-icon-angle-right icon"></span>
                        </a>
                        <div class="clear"></div>
                    </div>
                    <div class="order-addresslist">
                        <div class="order-address">
                            <div class="icon-add">
                            </div>
                            <p class="new-tit new-p-re">
                                <span class="new-txt" th:text="${itemList.receiverName}">小叮当</span>
                                <span class="new-txt-rd2" th:text="${itemList.receiverMobile}" >159****1622</span>
                            </p>
                            <div class="new-mu_l2a new-p-re">
                                <p class="new-mu_l2cw">
                                    <span class="title">收货地址：</span>
                                    <span class="province" th:text="${itemList.receiverProvince}"></span>
                                    <span class="city" th:text="${itemList.receiverCity}"></span>
                                    <span class="dist" th:text="${itemList.receiverDistrict}"></span>
                                    <span class="street" th:text="${itemList.receiverAddress}"></span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="order-infomain">

                    <div class="order-top">
                        <div class="th th-item">
                            <td class="td-inner">商品</td>
                        </div>
                        <div class="th th-price">
                            <td class="td-inner">单价</td>
                        </div>
                        <div class="th th-number">
                            <td class="td-inner">数量</td>
                        </div>
                        <div class="th th-operation">
                            <td class="td-inner">商品操作</td>
                        </div>
                        <div class="th th-amount">
                            <td class="td-inner">合计</td>
                        </div>
                        <div class="th th-status">
                            <td class="td-inner">交易状态</td>
                        </div>
                        <div class="th th-change">
                            <td class="td-inner">交易操作</td>
                        </div>
                    </div>

                    <div class="order-main">

                        <div class="order-status3">
                            <div class="order-title">
                                <div class="dd-num">订单编号：<a href="javascript:" th:text="${itemList.orderNo}"></a></div>
                                <span th:text="'生成时间：'+${#dates.format(itemList.createTime,'yyyy-MM-dd HH:mm:ss')}"></span>

                            </div>
                            <div class="order-content">
                                <div class="order-left">
                                    <ul class="item-list" th:each="item:${itemList.items}">
                                        <li class="td td-item">
                                            <div class="item-pic">
                                                <a href="#" class="J_MakePoint">
                                                    <img th:src="@{'/'+${item.subImages}}"
                                                         class="itempic J_ItemImg">
                                                </a>
                                            </div>
                                            <div class="item-info">
                                                <div class="item-basic-info">
                                                    <a href="#">
                                                        <p th:text="${item.productName}"></p>
                                                        <p class="info-little">颜色：12#川南玛瑙
                                                            <br/>包装：裸装 </p>
                                                    </a>
                                                </div>
                                            </div>
                                        </li>
                                        <li class="td td-price">
                                            <div class="item-price" th:text="${item.price}"></div>
                                        </li>

                                        <li class="td td-number">
                                            <div class="item-number">
                                                ×<span th:text="${item.quantity}"></span>
                                            </div>
                                        </li>
                                        <li class="td td-operation">
                                            <div class="item-operation">
                                                退款/退货
                                            </div>
                                        </li>
                                    </ul>


                                </div>
                                <div class="order-right">
                                    <li class="td td-amount">
                                        <div class="item-amount">
                                            合计：<a th:text="${itemList.totalPrice}"></a>
                                            <p>含运费：<span>0.00</span></p>
                                        </div>
                                    </li>
                                    <div class="move-right" >
                                        <li class="td td-status" th:switch="${itemList.status}">
                                            <div class="item-status" th:case="10">
                                                <p class="Mystatus">等待买家付款</p>
                                                <p class="order-info"><a
                                                        th:href="@{'/order/cancel/' + ${itemList.orderNo}}">取消订单</a>
                                                </p>
                                            </div>
                                            <div class="item-status" th:case="50">
                                                <p class="Mystatus">交易成功</p>
                                                <p class="order-info"><a href="logistics.html">查看物流</a></p>
                                            </div>
                                            <div class="item-status" th:case="60">
                                                <p class="Mystatus">交易关闭</p>
                                            </div>
                                            <div class="item-status" th:case="20">
                                                <p class="Mystatus">买家已付款</p>
                                            </div>
                                            <div class="item-status" th:case="40">
                                                <p class="Mystatus">卖家已发货</p>
                                                <p class="order-info"><a href="logistics.html">查看物流</a></p>
                                                <p class="order-info"><a href="#">延长收货</a></p>
                                            </div>
                                        </li>
                                        <li class="td td-change">
                                            <div class="am-btn am-btn-danger anniu"
                                                 th:if="${itemList.status eq 0 || itemList.status eq 50 || itemList.status eq 60}">
                                                <a th:href="@{'/order/delete/' + ${itemList.orderNo}}"
                                                   style="color: #FFF;">删除订单</a>
                                            </div>
                                            <div class="am-btn am-btn-danger anniu" id="alertMessage"
                                                 th:if="${itemList.status eq 20}">
                                                提醒发货
                                            </div>
                                            <div class="am-btn am-btn-danger anniu" id="recivedConfirm"
                                                 th:if="${itemList.status eq 40}">
                                                确认收货
                                            </div>
                                            <a href="pay.html" th:if="${itemList.status eq 10}">
                                                <div class="am-btn am-btn-danger anniu">
                                                    一键支付
                                                </div>
                                            </a>
                                        </li>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>

        </div>
        <!--底部-->
        <th:block th:include="common :: footer"></th:block>
    </div>
    <th:block th:include="common :: menu"></th:block>
</div>

</body>

</html>